<template>
	<view class="content padding">
		<u-navbar safeAreaInsetTop placeholder fixed>
			<view class="u-nav-slot" slot="left" @click="goBack">
				<u-icon name="arrow-left" size="19"></u-icon>
				<!-- <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line> -->
				<!-- <u-icon name="home" size="20"></u-icon> -->
			</view>
			<view class="u-nav-slot color_ling text_weight" slot="center">
				意见反馈
			</view>
			<view class="u-nav-slot text_a color_san" slot="right" @click="goHistoryFeedBack">
				历史反馈
			</view>
		</u-navbar>
		<view class="ffffff border padding">
			<textarea cols="30" rows="10" placeholder="请输入您要反馈的问题(5-500字以内)" maxlength="500"
				placeholder-style="font-size: 28rpx;font-weight: 500;color: #666666;" class="text_a"
				v-model="content"></textarea>
		</view>
		<view class="margin_top ffffff border padding">
			<view class="color_six text_a">
				请提供问题的截图或照片（选填）
			</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in martial_images_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode="widthFix"></image>
						<view class="deletimg" @click="deleimage(index,'martial_images')"></view>
					</view>
				</view>
				<!-- 图片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg('martial_images',5)"
					v-if="martial_images_arr.length<5">
					<view class="item_image radius">
						<image src="/static/image/home/noimage.png" mode="widthFix"></image>
						<!-- <view class="deletimg"></view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="margin_top border padding ffffff flexbetween">
			<view class="color_san text_a margin_right6">
				联系方式
			</view>
			<input class="text_a flex1 textright" type="number" placeholder="请输入手机号"
				placeholder-style="font-size: 30rpx;font-weight: 500;color: #999999;" v-model="contact">
		</view>
		<!-- 底部 -->
		<view class="footer ffffff padding">
			<view class="footerButton" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				martial_images: [], //图片
				martial_images_arr: [], //图片
				contact: "", //联系方式
				content: "", //反馈内容
			}
		},
		methods: {
			uploadImg(value, length) {
				var that = this;
				var martial_images = that.martial_images
				var martial_images_arr = that.martial_images_arr
				if (martial_images.length >= length) {
					httpRequest.toast('最多上传' + length + '张图片');
					return;
				}
				that.upFile.chooseImage({
					count: length - martial_images.length
				}, function(res) {
					console.log(res);
					martial_images_arr.push(res.fullurl)
					martial_images.push(res.url)
					console.log(martial_images_arr, martial_images);
					that.martial_images_arr = martial_images_arr
					that.martial_images = martial_images
				})
			},
			deleimage(index, value) {
				var that = this;
				if (value == "martial_images") {
					that.martial_images_arr.splice(index, 1)
					that.martial_images.splice(index, 1)
				}
			},
			submit() {
				let _this = this;
				if (!_this.content) {
					httpRequest.toast("请输入反馈内容！");
					return false
				}
				if(_this.content.length<5){
					httpRequest.toast("请至少输入五个字！");
					return false
				}
				if (!_this.contact) {
					httpRequest.toast("请输入联系方式！");
					return false
				}
				httpRequest.request('/api/user/feedback', 'POST', {
					contact: _this.contact,
					images: _this.martial_images.join(),
					content: _this.content,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			goBack() {
				uni.navigateBack(1)
			},
			goHistoryFeedBack() { //历史反馈
				uni.navigateTo({
					url: "./historyFeedBack"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>